<template>
  <div
    class="toast"
    :class="closeShow ? 'bigPad' : ''"
    v-show="isShow"
    ref="toast"
  >
    {{ message }}
    <div class="close" @click="closeClick" v-if="closeShow">
      <img src="~/assets/images/close.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      message: "",
      isShow: false,
      closeShow: true
    }
  },
  methods: {
    show(message, duration = 2000, isClose) {
      if (!isClose) {
        this.closeShow = false
      }
      this.isShow = true
      this.message = message

      setTimeout(() => {
        this.isShow = false
        this.message = ""
      }, duration)
    },
    closeClick() {
      this.$refs.toast.style.display = "none"
    }
  }
}
</script>

<style scoped>
.toast {
  font-size: 15px;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px 50px;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  z-index: 999;
}
.toast .bigPad {
  padding: 40px 75px;
}
.toast .close {
  position: absolute;
  top: 8px;
  right: 8px;
}
</style>
